<template>
  <el-container class="container" :style="{ height: controlHeight }">
    <div class="container-left">
      <slot name="left-container"></slot>
    </div>

    <div class="bar" v-dragSize="controlHeight">
      <div class="aside-control" @click="expandDisplaySidebar">
        <div class="aside-control-button"></div>
        <i class="icon" :class="asideIcon"></i>
      </div>
    </div>
    
    <div class="container-right" v-if="asideIcon == 'el-icon-caret-right'" style="width: 20%;">
      <slot name="right-container" :asideIcon="asideIcon"></slot>
    </div>
    <div v-else class="container-text" @click="expandDisplaySidebar" style="width: 14px;">
      {{ shrinkText }}
    </div>
  </el-container>
</template>

<script>
import {dragSize} from "@/utils/docUtils";
export default {
  name: "DragBox",
  data() {
    return {
      asideIcon: "el-icon-caret-right",
      currentHeight: "",
    };
  },
  methods: {
    expandDisplaySidebar() {
      if (this.asideIcon == "el-icon-caret-right") {
        this.asideIcon = "el-icon-caret-left";
      } else {
        this.asideIcon = "el-icon-caret-right";
      }
    },
  },
  props: {
    shrinkText: {
      type: String,
      required: true,
      default: "qwewqewqe",
    },
    controlHeight: {
      type: String,
      required: true,
      default: "calc(100vh - 50px)",
    },
  },
  directives: {
    dragSize,
  }
};
</script>


<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  .container-right {
    margin-left: 5px;
    min-width: 20%; /*设置宽度范围*/
    max-width: 80%;
    overflow: auto;
  }
  .container-left {
    flex-grow: 1;
    overflow-x: hidden;
  }
  .bar {
    position: relative;
    cursor: w-resize;
    width: 10px;
    height: 100%;
    border-left: 1px solid rgba(00, 00, 00, 0.5);
    background-color: #e9f0f3;
    .aside-control {
      &:hover {
        cursor: pointer;
      }
      .aside-control-button {
        position: absolute;
        top: 50%;
        transform: translate(-50%);
        width: 7px;
        height: 30px;
        background-color: #eeeef1;
        /*perspective：对元素进行透视操作*/
        /*rotateX：以y轴（横轴）进行旋转（前后仰俯）
  画个梯形出来*/
        transform: translate(105%, -50%) perspective(0.5em) rotateY(20deg);
        text-align: center;
        line-height: 80px;
        color: #909399;
      }
      .icon {
        position: absolute;
        top: 50%;
        transform: translate(-10%, -50%);
      }
    }
  }
  .container-text {
    min-width: 14px; /*设置宽度范围*/
    max-width: 4%;
    text-align: center;
    cursor: pointer;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>